import { defineConfig, BundlerConfigType } from 'umi';
import routes from './routes';
import defaultSetting from './defaultSetting';

// defineConfig 可以让写配置时,有提示
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  // routers[0].title 优先级最高
  routes,
  fastRefresh: {},
  antd: {},
  hash: true, // 打包的文件带有hash后缀
  base: process.env.NODE_ENV === 'production' ? '/umi-admin/' : '/', // 比如，你有路由 / 和 /users，然后设置了 base 为 /foo/，那么就可以通过 /foo/ 和 /foo/users 访问到之前的路由。
  publicPath: process.env.NODE_ENV === 'production' ? '/umi-admin/' : '/', // 相当于webpack的publicPath
  // outputPath: 'build', // 指定输出路径。
  title: defaultSetting.title, // 网站标题
  // 配置路由模式(默认 browser)
  history: {
    type: process.env.NODE_ENV === 'production' ? 'hash' : 'browser',
  },
  // 配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。
  targets: {
    ie: 11,
  },
  proxy: {
    '/api': {
      target: 'http://jsonplaceholder.typicode.com/',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
    '/koding': {
      target: 'http://kumanxuan1.f3322.net:8001',
      changeOrigin: true,
      pathRewrite: { '^/koding': '' },
    },
  },
  // 配置主题，实际上是配 less 变量。
  theme: {
    '@primary-color': defaultSetting.primaryColor,
  },
  // mountElementId: 'root', // 挂载ID
  dynamicImport: {
    loading: '@/Loading',
  },

  // ssr: {
  //   devServerRender: false,
  // },
  chainWebpack(config, { env, webpack, createCSSRule, type }) {
    // 对 ssr bundler config 的修改
    if (type === BundlerConfigType.ssr) {
      // 服务端渲染构建扩展
      console.log('ssr');
    }

    // 对 csr bundler config 的修改
    if (type === BundlerConfigType.csr) {
      console.log('csr');

      // 客户端渲染构建扩展
      config.output.filename('js/[name].[hash:8].js');
      config.output.chunkFilename('js/[name].[contenthash:8].chunk.js');
      // 修改css输出目录
      config.plugin('extract-css').tap(() => [
        {
          filename: `css/[name].[contenthash:8].css`,
          chunkFilename: `css/[name].[contenthash:8].chunk.css`,
          // ignoreOrder: true,
        },
      ]);
      // 修改图片输出目录
      config.module
        .rule('images')
        .test(/\.(png|jpe?g|gif|webp|ico)(\?.*)?$/)
        .use('url-loader')
        .loader(require.resolve('url-loader'))
        .tap((options) => {
          const newOptions = {
            ...options,
            name: 'img/[name].[hash:8].[ext]',
            fallback: {
              ...options.fallback,
              options: {
                name: 'img/[name].[hash:8].[ext]',
                esModule: false,
              },
            },
          };
          return newOptions;
        });
    }
  },
});
